<template>
  <div class="searchResult">
    <loading v-if="result.length == 0"></loading>
    <!-- 第一条最佳匹配歌手 -->
    <router-link :to="`singerdetails/${singerid}`" :singerid="singerid">
      <div class="firstSinger">
        <img :src="singer.picUrl" />
        <div class="textSinger">
          <span>歌手:</span>
          <span>{{ singer.name }}</span>
          <span>{{ singer.alia ? `-${singer.alia}` : "" }}</span>
        </div>
      </div>
    </router-link>
    <!--  -->
    <music-list
      @play="$emit('play', $event)"
      :songlist="result"
      :keywords="keywords"
    ></music-list>
    <loading v-if="isloading"></loading>
    <!-- 加载时没有内容(没有渲染),加入的ref="bottom"是无法使用的,会报错 -->
    <div v-else class="loadingmore" @click="getMore">
      {{ isMore ? "加载更多" : "没有更多了.." }}
    </div>
    <!--所以 令初始offsetTop有高度 -->
    <div ref="bottom" style="height: 5px"></div>
  </div>
</template>
<script>
import MusicList from "@/components/MusicList.vue";
import _ from "lodash";
export default {
  props: {
    keywords: String,
  },
  data() {
    return {
      result: [],
      page: 1, //记录分页页数
      limit: 20, //记录每页显示条数
      isMore: true, //记录是否有更多数据
      isloading: false, //记录是否正在加载数据
      singer: [], // 最佳匹配歌手 数据
      singerid: null, //最佳匹配歌手 ID
    };
  },
  created() {
    // 最佳匹配歌手
    this.axios
      .get(`/search?keywords=${this.keywords}&type=100`)
      .then((result) => {
        this.singer = result.artists[0];
        this.singerid = this.singer.id;
        // console.log("最佳匹配歌手:",this.singer);
      });
    this.getResult();
    window.addEventListener("scroll", this.windowScroll);
  },

  methods: {
    getResult() {
      let offset = (this.page - 1) * this.limit;
      this.axios
        .get(
          `/cloudsearch?keywords=${this.keywords}&limit=${this.limit}&offset=${offset}`
        )
        .then((result) => {
          // console.log("result==>",result);
          // 防止到底部没数据的时候报错
          if (result.songCount == 0) {
            this.isMore = false;
            this.isloading = false;
            return;
          }
          // 当result.songs没数据时停止执行
          if (!result.songs) return;
          let re = result.songs.map((v) => {
            v.song = {
              privilege: v.privilege,
              artists: v.ar,
              album: v.al,
            };
            return v;
          });
          this.result = this.result.concat(re);
          // console.log("单曲搜索=re==>",this.result[0].song)
          this.isloading = false;
        });
    },
    getMore() {
      if (this.page >= 10) {
        return;
      }
      this.isloading = true; //点击时加载,
      this.page++;
      this.getResult(); //有结果后加载组件隐藏。
    },
    // windowScroll(){
    //     console.log("滚动==>",window.scrollY,window.innerHeight,this.$refs.bottom.offsetTop);
    //     // 判断滚动距离Y + 窗口大小 > 最后一个元素距离最顶部内容的距离
    //     if(window.scrollY+window.innerHeight>this.$refs.bottom.offsetTop){
    //         console.log("滚动触发")
    //         this.getMore();
    //     }
    // }
    // 滚动加载 防抖
    windowScroll: _.debounce(function () {
      // console.log("滚动==>",window.scrollY,window.innerHeight,this.$refs.bottom.offsetTop);
      // 判断滚动距离Y + 窗口大小(窗口总高度) > 最后一个元素距离最顶部内容的距离
      if (
        this.$refs.bottom &&
        window.scrollY + window.innerHeight > this.$refs.bottom.offsetTop
      ) {
        this.getMore();
        console.log("滚动触发");
      }
    }, 500),
  },
    // 清除scroll 滚动方法
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
  components: {
    MusicList,
  },
};
</script>
<style lang="less" scoped>
.firstSinger {
  border-bottom: 1px solid rgba(204, 204, 204, 0.349);
  display: flex;
  align-items: center;
  img {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.623);
  }
}
.loadingmore {
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #ccc;
}
</style>